<template>
  <div>
    <div class="self-box">
      <Card class="smart-query-card">
        <!------ 查询条件第一行 begin------->
        <Row class="smart-query-form-row">
          <Form :model="searchForm" class="tools" inline ref="searchForm">
            <FormItem prop="sendStatus">
              <Input
                style="width: 200px"
                placeholder="Folder Name"
                v-model="searchForm.mappingFileName"
              />
                <!-- <Option :value="1">全部</Option>
                <Option :value="2">模板1</Option>
                <Option :value="2">模板2</Option>
              </Select> -->
            </FormItem>
            <FormItem prop="sendStatus">
              <Select
                style="width: 200px"
                placeholder="Please select mapping status"
                v-model="searchForm.mappingStatus"
              >
                <Option value="">All</Option>
                <Option v-for="item in fileTypeList" :key="item" :value="item.configKey">{{item.configKey}}</Option>
                <!-- <Option :value="Success">成功</Option>
                <Option :value="Fail">失败</Option> -->
              </Select>
            </FormItem>
            <FormItem>
              <ButtonGroup>
                <Button
                  @click="find"
                  icon="ios-search"
                  type="primary"
                  v-privilege="'filemapping-log-list-query'"
                  >查询</Button
                >
              </ButtonGroup>
            </FormItem>
          </Form>
        </Row>
      </Card>
      <Card class="warp-card">
        <!-------操作按钮行 begin------->
        <!-- <Row class="marginBottom10">
          <Button
            @click="deleteEmail"
            class="marginLeft10"
            icon="ios-trash-outline"
            size="small"
            type="error"
            v-privilege="'peony-list-batch-delete'"
            >删除</Button
          >
        </Row> -->
        <Table
          :columns="columns"
          :data="tableData"
          border
          highlight-row
          ref="mainTable"
        ></Table>
        <Page
          :current="searchForm.pageNum"
          :page-size="searchForm.pageSize"
          :page-size-opts="[10, 20, 30, 50, 100]"
          :total="total"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          show-elevator
          show-sizer
          show-total
          class="smart-query-table-page"
        ></Page>
      </Card>
    </div>
  </div>
</template>

<script>
import { assetsApi } from '@/api/assets.js';
import { fileApi } from '@/api/file.js';

export default {
  name: 'MappingLogList',
  components: {
  },
  props: {},
  data () {
    return {
      batchDeleteModal: {
        show: false
      },
      // 数据量
      total: null,
      // 查询参数
      searchForm: {
        mappingEndDate: null,
        mappingStartDate: null,
        pageNum: 1,
        pageSize: 10,
        searchCount: true // 是否查询总条数
      },
      // 表头
      columns: [
        {
          type: 'selection',
          width: 30,
          align: 'center'
        },
        {
          title: 'Asset Name',
          width: 300,
          key: 'assetName'
        },
        {
          title: 'Uploaded Time',
          width: 150,
          key: 'createTime'
        }, {
          title: 'Mapping Result',
          key: 'mappingResult',
          width: 150
        },
        {
          title: 'Result Description',
          key: 'mappingResultDesc',
          width: 150
        },
        {
          title: 'Mapping File',
          key: 'mappingFileName',
          align: 'center',
          className: 'action-hide',
          render: (h, params) => {
            console.log(params);
            return h('div', [
              h(
                'a',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.downloadFile(params.row.fileId);
                    }
                  }
                },
                params.row.mappingFileName
              )
            ]);
          }
        }
      ],
      // table数据
      tableData: [],
      // 删除id
      delId: null,
      mainTableSelectArray: [],
      fileTypeList: []
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created () {
    this.queryList();
    this.getFileType();
  },
  methods: {
    async getFileType () {
      let res = await assetsApi.getOneGroup({ group: 'mapping_status' });
      this.fileTypeList = res.data;
    },
    // 重置
    reset () {
      this.$refs.searchForm.resetFields();
      this.searchForm.startDate = null;
      this.searchForm.endDate = null;
      this.$set(this.searchForm, 'endDate', null);
      this.find();
    },
    // 删除确定
    async deleteSure (data) {
      this.$Spin.show();
      let res = await emailApi.deleteEmail(data);
      this.$Message.success('Delete success');
      this.$Spin.hide();
      this.queryList();
    },
    // 删除操作
    deleteEmail () {
      if (!this.validateMainTableSelection()) {
        return;
      }
      this.$Modal.confirm({
        title: 'Kindly Reminder',
        content: 'Are you sure to delet the selected items?',
        onOk: () => {
          this.deleteSure(this.mainTableSelectArray.map((e) => e.id));
        },
        okText: 'Confirm',
        cancelText: 'Cancel'
      });
    },
    // 查询
    find () {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 10;
      this.queryList();
    },
    // 更改分页查询条数
    changePageSize (pageSize) {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = pageSize;
      this.queryList();
    },
    // 获取邮件数据
    async queryList () {
      this.$Spin.show();
      let res = await assetsApi.fileRelation(this.searchForm);
      this.$Spin.hide();
      this.tableData = res.data.list;
      this.total = res.data.total;
      if (res.data.pages < this.searchForm.pageNum) {
        this.searchForm.pageNum = res.data.pages;
      }
    },
    // 页码改变
    changePage (pageNum) {
      this.searchForm.pageNum = pageNum;
      this.queryList();
    },
    // 校验是否有选中
    validateMainTableSelection () {
      this.mainTableSelectArray = this.$refs.mainTable.getSelection();
      if (this.mainTableSelectArray.length < 1) {
        this.$Message.error('请选择至少一条数据');
        return false;
      }
      return true;
    },
    downloadFile (id) {
      if (!id) {
        this.$Message.error("File id invalid");
        return;
      }
      let arr = [];
      arr.push({
        fileMode: 0,
        id: id
      });
      fileApi.downTemp({ fileModeList: arr });
    }
  }
};
</script>
